<template>
	<notice :notice.sync="notice"></notice>
    <header-paper action="testPaper" :cla-id="paper.class_cla_id"></header-paper>
    
    <div class="loading" v-show="loading">
        <i class="fa fa-spinner fa-spin fa-3x"></i>
    </div>

    <div class="container" id="question-container" v-show="!loading">
        <div class="row">
            <div class="col-md-4 col-md-offset-1">
                <span class="quiz-name">{{ paper.qus_name }}</span> 
                <span class="text-muted">{{ paper.qus_create_time }}</span>
            </div>
        </div>
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <button class="btn btn-success" @click="beforeSubmitPaper()" v-if="paper.qus_status == 1 && paper.commit == '未交'">提交</button>
                <button class="btn btn-primary disabled" v-if="paper.qus_status == 2 && paper.commit == '未交'">测试结束</button>
                <span v-if="paper.qus_status == 1 && paper.commit == '已交'">已提交</span>
                <span class="pull-right" v-if="paper.qus_status == 2 && paper.commit == '已交'">成绩<span class="text-danger quiz-score"> {{score}}</span></span>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
                <paper-item v-for="que in ques"
                            :que="que"
                            :index="$index"
                            :read-only="paper.qus_status==2||paper.commit=='已交'"
                            @msg="showMsg"
                            @save-answer="saveAnswer">
                </paper-item>
            </div>
        </div>
    </div>
    <modal type="modal-sm" id="submit-paper">
        <h4 slot="header" class="modal-title">提交测试</h4>
        <p slot="body">{{confirmText}}</p>
        <button slot="footer" type="button" class="btn btn-primary" @click="submitPaper()">提交</button>
    </modal>
</template>

<script>
	import HeaderPaper from '../../Component/HeaderPaper/HeaderPaper';
    import Notice from '../../Component/Notice/Notice';
    import PaperItem from '../../Component/PaperAnswerItem/PaperAnswerItem';
    import Modal from '../../Component/Modal/Modal';

    export default {
        created: function() {
            this.getPaper();
            this.getPaperInfo();
        },
        data() {
            return {
                tpId: location.search.slice(1).split('=')[1],
                notice: {type: 0, msg: ""},
                loading: false,
                paper: {},
                ques: [],
                confirmText: '',
                score: -1
            }
        },
    	components: {
    		HeaderPaper,
    		Notice,
            PaperItem,
            Modal
    	},
        methods: {
            getPaper: function() {
                this.loading = true;
                this.$http.post('/question/question', {qus_id: this.tpId}).then(function(resp) {
                    this.loading = false;
                    if (resp.data.status === 1) {
                        var ques = resp.data.data.ques;
                        this.score = resp.data.data.stu_score;
                        ques.forEach((value) => {
                            value.editing = false;
                            // 将选项保存到数组
                            value.que_items = [];
                            for (let i = 1; i <= 8; i++) {
                                if (value["que_item"+i]) {
                                    value.que_items.push(value["que_item"+i]);
                                }
                                delete value["que_item"+i];
                            }
                            // 初始化学生答案
                            if (value.que_type < 2) {
                                value.stu_answer = value.stu_answer || -1;
                            } else if (value.que_type == 2) {
                                value.stu_answer = value.stu_answer ? value.stu_answer.split("") : [];
                            } else {
                                value.stu_answer = value.stu_answer || '';
                            }
                            // 参考答案
                            if (value.que_answer) {
                                if (value.que_type == 0) {
                                    value.que_answer = value.que_answer == 0 ? "对" : "错";
                                }
                                else if (value.que_type == 1 || value.que_type == 2) {
                                    value.que_answer = value.que_answer.split("").map(function(item, index, array) {
                                        return String.fromCharCode(65+parseInt(item));
                                    }).join('、');
                                }
                            }
                        })
                        this.ques = ques;

                    } else {
                        this.notice = {type: 0, msg: resp.data.message};
                    }
                }, function(resp) {
                    // error callback
                    this.loading = false;
                    this.notice = {type: 0, msg: resp.statusText};
                })
            },
            getPaperInfo: function() {
                this.$http.post('/questionSet/getQuizInfo', {qus_id: this.tpId}).then(function(resp) {
                    if (resp.data.status === 1) {
                        this.paper = resp.data.data;
                    }
                }, function(resp) {
                    // error callback
                    this.notice = {type: 0, msg: resp.statusText};
                })
            },
            showMsg: function(msg, type) {
                this.notice = {type: type, msg: msg};
            },
            beforeSubmitPaper: function() {
                var answerAll = this.ques.every((value) => {
                    if (value.que_type < 2) {
                        return value.stu_answer !== -1;
                    } else if (value.que_type == 2) {
                        return value.stu_answer.length > 0;
                    } else {
                        return value.stu_answer !== '';
                    }
                })
                if (!answerAll) {
                    this.confirmText = '测试未完成，确认提交?';
                } else {
                    this.confirmText = '已完成测试，确认提交?';
                }
                $('#submit-paper').modal('toggle');
            },
            submitPaper: function () {
                this.$http.post('/stuResult/commitQus', {qus_id: this.paper.qus_id}).then(function(resp) {
                    if (resp.data.status === 1) {
                        $('#submit-paper').modal('toggle');
                        this.notice = {type: 1, msg: '提交成功'};
                        setTimeout(() => {
                            location.reload();
                        }, 1000)
                    } else {
                        this.notice = {type: 0, msg: resp.data.message};
                    }
                }, function(resp) {
                    // error callback
                    this.notice = {type: 0, msg: resp.statusText};
                })
            },
            saveAnswer: function (index) {
                var que = this.ques[index];
                var postData = {
                    que_id: que.que_id,
                    stu_answer: que.que_type == 2 ? que.stu_answer.join('') : que.stu_answer
                }
                this.$http.post('/stuQue/answer', postData).then(function(resp) {
                    if (resp.data.status === 1) {
                        this.notice = {type: 1, msg: '保存答案成功'};
                    } else {
                        this.notice = {type: 0, msg: resp.data.message};
                    }
                }, function(resp) {
                    // error callback
                    this.notice = {type: 0, msg: resp.statusText};
                })
            }
        }
    }
</script>

<style>
@import './style.css';
</style>